<template>
  <div class="boxContent">
    <div class="appBox">
      <div class="searchList">
        <el-form :model="state.params"
                 ref="FormInstance "
                 class="boxFrom">
          <div class="searchBox">
            <template v-for="(item, index) in state.totalInputColumns"
                      :key="index">
              <el-form-item v-if="item.type == 'input'">
                <el-input clearable
                          v-model="state.params[item.key]"
                          :placeholder="item.label"></el-input>
              </el-form-item>
              <el-form-item v-if="item.type == 'select'">
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'sectorId'">
                  <el-option v-for="i in state.optionsPre"
                             :key="i"
                             :label="i.dictValue"
                             :value="i.id"></el-option>
                </el-select>
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'enableStatus'">
                  <el-option value="0"
                             label="未启用"></el-option>
                  <el-option value="1"
                             label="启用"></el-option>
                </el-select>
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'status' && state.params.payType == 'qrcode'">
                  <el-option value="0"
                             label="待发起支付" />
                  <el-option value="1"
                             label="支付中" />
                  <el-option value="2"
                             label="已支付" />
                  <el-option value="3"
                             label="已退款" />
                  <el-option value="-1"
                             label="已取消" />
                </el-select>
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable
                           v-if="item.key == 'status' && state.params.payType == 'offline'">
                  <el-option value="0"
                             label="待上传凭证" />
                  <el-option value="1"
                             label="待审核" />
                  <el-option value="2"
                             label="已入账" />
                  <el-option value="3"
                             label="已退款" />
                  <el-option value="-1"
                             label="已取消" />
                </el-select>

              </el-form-item>
              <el-form-item v-if="item.type == 'time'">
                <el-date-picker v-if="item.key == 'timexx'"
                                v-model="state.timexx"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                value-format="YYYY-MM-DD"
                                end-placeholder="结束时间" />
              </el-form-item>
            </template>
          </div>

          <el-form-item class="btns">
            <el-button v-preventReClick
                       type="primary"
                       plain
                       @click="methods.handleAction('query')">搜索</el-button>
            <el-button v-preventReClick
                       @click="methods.handleAction('reset')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tabaleBox">
        <el-table border
                  v-loading="state.loading"
                  :data="state.tableData"
                  style="width: 100%"
                  :header-cell-style="{ color: '#000' }">
          <el-table-column prop="createdAt"
                           label="接入时间"
                           show-overflow-tooltip
                           align="center"
                           width="180" />
          <el-table-column prop="channelName"
                           label="渠道名称"
                           show-overflow-tooltip
                           align="left"
                           min-width="120">
          </el-table-column>
          <el-table-column prop="costRate"
                           label="成本费率"
                           show-overflow-tooltip
                           width="100"
                           align="center" />
          <el-table-column prop="withdrawalRate"
                           label="提现费率"
                           show-overflow-tooltip
                           align="center"
                           width="100" />
          <el-table-column prop="amountHigh"
                           label="最大单笔金额"
                           show-overflow-tooltip
                           width="130"
                           align="center" />
          <el-table-column prop="amountLow"
                           label="最小单笔金额"
                           show-overflow-tooltip
                           align="center"
                           width="120">
          </el-table-column>
          <el-table-column prop="bindCardCount"
                           label="绑定卡数"
                           show-overflow-tooltip
                           width="120"
                           align="center">
          </el-table-column>

          <el-table-column prop="withdrawalCount"
                           label="提现笔数"
                           show-overflow-tooltip
                           width="120"
                           align="center">
            <template #default="scope">
              <span :class="scope.row.withdrawalCount == 0 ? '':'primary cup'"
                    @click="methods.handleAction('withdrawalCount',scope.row,0)">
                {{ scope.row.withdrawalCount }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="withdrawalFailCount"
                           label="失败笔数"
                           show-overflow-tooltip
                           width="120"
                           align="center">
            <template #default="scope">
              <span :class="scope.row.withdrawalFailCount == 0 ? '':'primary cup'"
                    @click="methods.handleAction('withdrawalCount',scope.row,1)">
                {{ scope.row.withdrawalFailCount }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="withdrawalSuccessAmount"
                           label="成功提现总金额"
                           show-overflow-tooltip
                           width="130"
                           align="right">
            <template #default="scope">
              <span :class="scope.row.withdrawalSuccessAmount == 0 ? '':'primary cup'"
                    @click="methods.handleAction('withdrawalCount',scope.row,2)">
                {{ scope.row.withdrawalSuccessAmount }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="useAmount"
                           label="提现方式"
                           show-overflow-tooltip
                           width="120"
                           align="center">
            <template #default="scope">
              <span>银行卡</span>
            </template>
          </el-table-column>
          <el-table-column prop="enableStatus"
                           label="状态"
                           show-overflow-tooltip
                           width="120"
                           align="center">
            <template #default="scope">
              <span :class="scope.row.enableStatus == 0 ? 'error' :'primary'">
                {{ scope.row.enableStatus == 0 ? '未启用' :'启用' }}
              </span>
            </template>
          </el-table-column>

          <el-table-column prop="btns"
                           label="操作"
                           show-overflow-tooltip
                           align="center"
                           width="100"
                           fixed="right">
            <template #default="scope">
              <div class=" btnsDatil">
                <div class=""
                     v-permission="1151"
                     @click="methods.handleAction('edit', scope.row)">编辑</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination background
                       v-model:current-page="state.params.pageNum"
                       v-model:page-size="state.params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="state.totalSize"
                       @size-change="methods.handleSizeChange"
                       @current-change="methods.handleCurrentChange" />
      </div>

    </div>
    <el-dialog v-model="state.dialogVisible"
               title="编辑"
               width="35%">

      <div class="pl20 pr20 pt10 pb20">
        <div class="fb f18">提现渠道名称</div>
        <div class="info mt4">用户前端展示用户的提现名称</div>
        <div class="mt10 flex_c">
          <div>&emsp;&emsp;&emsp;提现渠道名称：</div>
          <div class="flex1">
            <el-input v-model="state.dialogFrom.channelName"
                      maxlength="60"
                      clearable
                      placeholder="请输入提现渠道名称"></el-input>
          </div>

        </div>
        <div class="fb f18 mt20">提现税率设置</div>
        <div class="info mt4">提现税率是指用户发起提现，每笔提现都需要由平台代缴个人所得税，税费根据百分比进行计算</div>
        <div class="mt10">
          <div class="flex_center">
            <div>提现手续费成本费率：</div>
            <div>
              <el-input v-model="state.dialogFrom.costRate"
                        maxlength="6"
                        @input="state.dialogFrom.costRate = $input.inputLimit('D10008',state.dialogFrom.costRate)"
                        placeholder="请填写提现手续费成本费率"></el-input>
            </div>
          </div>
          <div class="flex_center">
            <div>&emsp;提现手续费百分比：</div>
            <div>
              <div>
                <el-input v-model="state.dialogFrom.withdrawalRate"
                          class="mt10"
                          maxlength="10"
                          @input="state.dialogFrom.withdrawalRate = $input.inputLimit('D10008',state.dialogFrom.withdrawalRate)"
                          placeholder="请填写提现手续费百分比"></el-input>
              </div>
            </div>
          </div>

        </div>
        <div class="fb f18 mt20">最低/最高提现金额</div>
        <div class="info mt4">最低提现金额是指用户提现单次提现最低金额，低于最低金额不可发起提现</div>
        <div class="mt10">
          <div class="flex_center">
            <div>&emsp;&emsp;&emsp;最低提现金额：</div>
            <div>
              <el-input v-model="state.dialogFrom.amountLow"
                        maxlength="10"
                        @input="state.dialogFrom.amountLow = $input.inputLimit('D10008',state.dialogFrom.amountLow)"
                        placeholder="请填写最低提现金额"></el-input>
            </div>
          </div>
          <div class="flex_center">
            <div>&emsp;&emsp;&emsp;最高提现金额：</div>
            <div>
              <el-input v-model="state.dialogFrom.amountHigh"
                        class="mt10"
                        @input="state.dialogFrom.amountHigh = $input.inputLimit('D10008',state.dialogFrom.amountHigh)"
                        maxlength="10"
                        placeholder="请填写最高提现金额"></el-input>
            </div>
          </div>
        </div>
        <div class="flex mt20">
          <div class="flex_c">是否启用 </div>
          <div class="ml20 mt4">
            <el-switch v-model="state.dialogFrom.myEnableStatus"
                       @change="state.dialogFrom.enableStatus = state.dialogFrom.myEnableStatus == true ? 1 : 0" />
          </div>
        </div>
        <div class="mt20 tac">
          <el-button v-preventReClick
                     @click="state.dialogVisible = false">取消</el-button>
          <el-button v-preventReClick
                     type="primary"
                     @click="methods.handleAction('submit','xx')">保存</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="state.dialogVisiblePass"
               title="请输入操作密码"
               :width="$px2rem('500px')">
      <div class="mt50 mb50 flex_c">
        <el-input style="width: 250px;"
                  v-model="state.password"
                  clearable
                  show-password
                  type="password"
                  placeholder="请输入操作密码"></el-input>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button v-preventReClick
                     @click="state.dialogVisiblePass = false">取消</el-button>
          <el-button v-preventReClick
                     type="primary"
                     @click="methods.passCheck">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance } from "vue";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const app = getCurrentInstance()?.proxy;
const initState = () => {
  return {
    dialogVisiblePass: false,
    password: '',
    dialogFrom: {},
    dialogVisible: false,
    loading: false,
    totalSize: 0,
    tableData: [],
    params: {
      pageNum: 1,
      pageSize: 10,
      // cid: JSON.parse(localStorage.getItem('userInfor')).cid,
      // account: JSON.parse(localStorage.getItem('userInfor')).account,
    },
    totalInputColumns: [
      { key: "channelName", label: "渠道名称", type: "input" },
      { key: "enableStatus", label: "是否启用", type: "select" },
    ],
  };
};
const state = reactive(initState());
onMounted(() => {
  state.optionsPre = JSON.parse(localStorage.getItem("profession"));
  methods.getDataList();
});
const methods = {

  handleAction (type, data, status) {
    switch (type) {
      case "export": //导出
        app.$http
          .get(
            `usermoney/queryListExport?namephone=${state.params.namephone || ''}&cname=${state.params.cname || ''}`,
            { responseType: "arraybuffer" }
          )
          .then((res) => {
            if (res) {
              app.$parse.downloadExcel(res, '资金统计数据')
            }
          });
        break;
      case "query": //查询
        methods.getDataList();
        break;
      case "reset": // 重置
        state.params = initState().params;
        state.timexx = []
        break;
      case "edit": // 编辑
        state.dialogFrom.id = data.id
        state.dialogVisiblePass = true
        break;
      case "withdrawalCount": // 提现页面
        let channel = ''
        let withdrawalStatus = ''
        if (data.type == 0) {
          channel = 'linggong'
        } else if (data.type == 1) {
          channel = 'haozhi'
        }
        if (status == 1) { // 提现笔数
          withdrawalStatus = 'FAIL'
        } else if (status == 2) {
          withdrawalStatus = 'SUCCESS'
        }
        app.$router.push(`/balance/withdrawalRecords?withdrawalStatus=${withdrawalStatus}&channel=${channel}`)
        break;
      case "submit": // 保存
        if (state.dialogFrom.amountLow < 20 || state.dialogFrom.amountHigh < 20) {
          return ElMessage.error('最低/最高提现金额不能小于20')
        }
        if (state.dialogFrom.costRate < 0.1 || state.dialogFrom.withdrawalRate < 0.1) {
          return ElMessage.error('提现税率不能低于0.1%')
        }
        app.$post('withdrawalChannel/updateById', state.dialogFrom).then(res => {
          if (res.code == 200) {
            ElMessage({
              type: "success",
              message: "已修改",
            });
            methods.getDataList()
            state.dialogVisible = false
          }
        })
        break;
      case "delete": // 删除
        ElMessageBox.confirm("请确认是否删除该招聘企业?", "删除招聘企业", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            app.$http.get("/company/deleteById?id=" + data.id).then((res) => {
              methods.getDataList();
              ElMessage({
                type: "success",
                message: "已删除",
              });
            });
          })
          .catch(() => {
            methods.getDataList();
            ElMessage({
              type: "info",
              message: "已取消",
            });
          });
        break;
    }
  },
  passCheck () {
    if (state.password == '') {
      ElMessage({
        message: '请输入操作密码',
        type: 'error'
      })
      return
    }
    app.$post('/sysconfig/checkPassword', { usePassword: state.password }).then(res => {
      console.log(res);
      if (res.code == 200) {
        ElMessage({
          message: '验证成功',
          type: 'success'
        })
        state.dialogVisiblePass = false
        state.password = ''
        app.$get('withdrawalChannel/getById', { id: state.dialogFrom.id }).then(res => {
          if (res.code == 200) {
            state.dialogFrom = res.data
            state.dialogFrom.myEnableStatus = state.dialogFrom.enableStatus == 0 ? false : true
            state.dialogVisible = true
          }
        })
      }
    })
  },
  getDataList () {
    state.loading = true
    app.$post("/withdrawalChannel/pageList", state.params).then((res) => {
      state.tableData = res.data.records;
      state.totalSize = res.data.total;
      state.loading = false
    }).catch(() => {
      state.loading = false
    })
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>

<style lang="scss" scoped>
.appBox {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  height: calc(100% - 20px);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  ::v-deep(.el-drawer__title) {
    color: rgba(0, 121, 254, 1);
    font-size: 18px;
    font-family: SourceHanSansSC-bold;
    font-weight: bold;
  }
  .drawerConcent {
    .title {
      color: rgb(16, 16, 16);
      font-size: 16px;
      text-align: left;
      font-family: SourceHanSansSC-regular;
    }
    .flex_sb {
      align-items: center;
      flex-wrap: wrap;
      .inputShow {
        margin-top: 16px;
        width: 48%;
        min-width: 260px;
      }
    }
  }
  .tabaleBox {
    overflow: hidden;
    flex: 1;
  }
  .btnsDatil {
    color: #0079fe;
    cursor: pointer;
    align-items: center;
  }
  .pagination {
    margin-top: 20px;
    height: 50px;
    display: flex;
    justify-content: flex-end;
  }
  ::v-deep(.el-dialog__body) {
    max-height: 380px;
  }
  .imgs {
    flex-wrap: wrap;
    .forbox {
      height: 150px;
      margin: 10px 0 0 10px;
    }
    .imgBox {
      height: 100%;
      width: auto;
    }
    .videoBox {
      width: auto;
      height: 100%;
    }
  }
}
</style>
